<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'

defineProps({
    tag:{
        type:String,
        default:'search'
    }
})

const search = ref('')

</script>
<template>
  <div class="search">
    <el-input :prefix-icon="Search" size="small" class="input" v-model="search" placeholder="搜索" />
    <img v-if="tag === 'search'" class="svg" src="@/assets/icons/add.svg" alt="" />
    <img v-else class="svg" src="@/assets/icons/user.svg" alt="" />
  </div>
</template>
<style scoped lang='scss'>
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: $search-bg;
  .input {
    display: block;
    width: 150px;
    height: 22px;
  }
  .svg {
    display: block;
    text-align: center;
    width: 22px;
    height: 22px;
    padding: 4px;
    cursor: pointer;
    background-color: #f5f5f5;
    border-radius: 2px;
  }
}
</style>